<template>
  <div>
    <!-- 工具栏 -->
    <div>
      <el-row>
        <el-col :span="8">
          <!-- 操作按钮 -->
          <div class="operation-div">
            <el-button type="primary" @click="onAdd">添加</el-button>
          </div>
        </el-col>
        <el-col :span="16">
          <!-- 条件查询 -->
          <div class="search-div">
            <el-form :inline="true" :model="searchData" class="demo-form-inline">
              <el-form-item label="业务名称：">
                <el-input v-model="searchData.businessName" placeholder="请输入业务名称" clearable />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSearch">查询</el-button>
                <el-button type="primary" @click="onReset">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 表格内容 -->
    <div>
      <el-table
        :data="tableData"
        border
        stripe
        style="width: 100%"
        :header-cell-style="{ background: '#ECF5FF' }"
      >
        <el-table-column type="index" :index="indexMethod" />
        <el-table-column prop="customerId" label="客户编号" />
        <el-table-column prop="businessName" label="业务名称" />
        <el-table-column prop="businessStatus" label="业务状态" />
        <el-table-column prop="installationAddress" label="装机地址" />
        <el-table-column prop="operatorOrderNumber" label="运营商工单编号" />
        <el-table-column prop="operatorOrderType" label="运营商工单类型" />
        <el-table-column prop="operatorOrderReceiveDate" label="运营商工单接收日期" />
        <el-table-column prop="operatorOrderReturnDate" label="运营商工单返单日期" />
        <el-table-column prop="businessNumber" label="业务号码" />
        <el-table-column prop="orderStatus" label="工单状态" />
        <el-table-column prop="dataStatus" label="数据状态" />
        <el-table-column prop="regionName" label="地区" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div style="margin-top: 20px">
        <el-pagination
          v-model:current-page="pageData.currentPage"
          v-model:page-size="pageData.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          background
          layout="->, jumper, total, sizes, prev, pager, next"
          :total="pageData.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!-- 添加修改对话框表单-->
    <el-dialog v-model="dialogFormVisible" :title="title" width="500" draggable overflow @close="onDialogFormCancel">
      <el-form :model="form" ref="ruleFormRef" :rules="rules">
        <el-form-item label="客户编号" prop="customerId">
          <el-input v-model="form.customerId" :disabled="isAdd" />
        </el-form-item>
        <el-form-item label="业务名称" prop="businessName">
          <el-input v-model="form.businessName" />
        </el-form-item>
        <el-form-item label="业务状态" prop="businessStatus">
          <el-select v-model="form.businessStatus">
            <el-option label="正式业务" value="正式业务"></el-option>
            <el-option label="试用业务" value="试用业务"></el-option>
            <el-option label="拆机业务" value="拆机业务"></el-option>
            <el-option label="试用结束业务" value="试用结束业务"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="装机地址" prop="installationAddress">
          <el-input v-model="form.installationAddress" />
        </el-form-item>
        <el-form-item label="运营商工单编号" prop="operatorOrderNumber">
          <el-input v-model="form.operatorOrderNumber" />
        </el-form-item>
        <el-form-item label="运营商工单类型" prop="operatorOrderType">
          <el-select v-model="form.operatorOrderType">
            <el-option label="装机" value="装机"></el-option>
            <el-option label="移机" value="移机"></el-option>
            <el-option label="拆机" value="拆机"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="运营商工单接收日期" prop="operatorOrderReceiveDate">
          <el-date-picker v-model="form.operatorOrderReceiveDate" type="date" placeholder="选择日期" />
        </el-form-item>
        <el-form-item label="运营商工单返单日期" prop="operatorOrderReturnDate">
          <el-date-picker v-model="form.operatorOrderReturnDate" type="date" placeholder="选择日期" />
        </el-form-item>
        <el-form-item label="业务号码" prop="businessNumber">
          <el-input v-model="form.businessNumber" />
        </el-form-item>
        <el-form-item label="工单状态" prop="orderStatus">
          <el-select v-model="form.orderStatus">
            <el-option label="未派单" value="未派单"></el-option>
            <el-option label="已派单" value="已派单"></el-option>
            <el-option label="已收单" value="已收单"></el-option>
            <el-option label="已回单" value="已回单"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数据状态" prop="dataStatus">
          <el-select v-model="form.dataStatus">
            <el-option label="新建" value="新建"></el-option>
            <el-option label="修改" value="修改"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="操作人" prop="operator">
          <el-input v-model="form.operator" />
        </el-form-item>
        <el-form-item label="地区" prop="regionName">
          <el-input v-model="form.regionName" />
        </el-form-item>
      </el-form>
      <!-- 表单底部按钮 -->
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="onDialogFormCancel">取消</el-button>
          <el-button type="primary" @click="onDialogFormConfirm">确认</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import {
  businesspageListService,
  businessaddService,
  businessgetByIdService,
  businessupdateService,
  businessdeleteByIdService
} from '@/api/user.js';

// 表单数据
const searchData = ref({
  businessName: ''
});

// 表格数据
const tableData = ref([]);

// 分页数据
const pageData = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 20
});
// 分页插件，每页条数发生改变时
const handleSizeChange = (val) => {
  pageData.pageSize = val;
  getPageList();
};

// 分页插件，当页码发生改变时
const handleCurrentChange = (val) => {
  pageData.currentPage = val;
  getPageList();
};

// 分页查询
const getPageList = async () => {
  const params = {
    currentPage: pageData.currentPage,
    pageSize: pageData.pageSize,
    businessName: searchData.value.businessName
  };
  const result = await businesspageListService(params);
  pageData.total = result.data.total;
  tableData.value = result.data.items;
};
getPageList();

// 头部表单函数定义
const onSearch = () => {
  getPageList();
};

// 重置查询表单
const onReset = () => {
  searchData.value = {};
  getPageList();
};

// 添加修改对话框表单
const form = ref({
  businessId:'',
  customerId:'',
  businessName: '',
  businessStatus: '',
  installationAddress: '',
  operatorOrderNumber: '',
  operatorOrderType: '',
  operatorOrderReceiveDate: '',
  operatorOrderReturnDate: '',
  businessNumber: '',
  orderStatus: '',
  dataStatus: '',
  operator: '',
  regionName: ''
});

// 重置对话框表单
const resetForm = () => {
  form.value = {
    businessId:'',
    customerId:'',
    businessName: '',
    businessStatus: '',
    installationAddress: '',
    operatorOrderNumber: '',
    operatorOrderType: '',
    operatorOrderReceiveDate: '',
    operatorOrderReturnDate: '',
    businessNumber: '',
    orderStatus: '',
    dataStatus: '',
    operator: '',
    regionName: ''
  };
  title.value = '添加业务';
  isAdd.value = true;
};

const title = ref('添加业务');
const isAdd = ref(true);
const dialogFormVisible = ref(false);

// 提交对话框表单按钮事件
const onDialogFormConfirm = async () => {
  if (!ruleFormRef.value) return;
  await ruleFormRef.value.validate((valid) => {
    if (valid) {
      confirm();
    }
  });
};

// 取消对话表单框按钮事件
const onDialogFormCancel = () => {
  dialogFormVisible.value = false;
  resetForm();
};

// 添加按钮事件
const onAdd = () => {
  title.value = '添加业务';
  isAdd.value = true;
  dialogFormVisible.value = true;
};

// 修改按钮事件
const handleEdit = async (index, row) => {
  title.value = '修改业务';
  isAdd.value = false;
  const id = { id: row.businessId };
  let result = await businessgetByIdService(id);
  form.value = result.data;
  dialogFormVisible.value = true;
};

// 删除按钮事件
const handleDelete = (index, row) => {
  ElMessageBox.confirm('确认要删除吗？', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      let result = await businessdeleteByIdService(row.businessId);
      ElMessage.success(result.msg ? result.msg : '删除成功');
      getPageList();
    })
    .catch(() => {});
};

// 提交表单
const confirm = async () => {
  if (isAdd.value) {
    try {
      let result = await businessaddService(form.value);
      ElMessage.success(result.msg ? result.msg : '添加成功');
      dialogFormVisible.value = false;
      resetForm();
      getPageList();
    } catch (error) {
      console.error(error);
    }
  } else {
    try {
      let result = await businessupdateService(form.value);
      ElMessage.success(result.msg ? result.msg : '修改成功');
      dialogFormVisible.value = false;
      resetForm();
      getPageList();
    } catch (error) {
      console.error(error);
    }
  }
};

// 表单校验
const ruleFormRef = ref(null);
const rules = ref({
  customerId: [{ required: true, message: '客户编号不能为空', trigger: 'blur' }],
  businessName: [{ required: true, message: '业务名称不能为空', trigger: 'blur' }],
  businessStatus: [{ required: true, message: '业务状态不能为空', trigger: 'blur' }],
  installationAddress: [{ required: true, message: '装机地址不能为空', trigger: 'blur' }],
  operatorOrderNumber: [{ required: true, message: '运营商工单编号不能为空', trigger: 'blur' }],
  operatorOrderType: [{ required: true, message: '运营商工单类型不能为空', trigger: 'blur' }],
  operatorOrderReceiveDate: [{ required: true, message: '运营商工单接收日期不能为空', trigger: 'blur' }],
  businessNumber: [{ required: true, message: '业务号码不能为空', trigger: 'blur' }],
  orderStatus: [{ required: true, message: '工单状态不能为空', trigger: 'blur' }],
  dataStatus: [{ required: true, message: '数据状态不能为空', trigger: 'blur' }],
  regionName: [{ required: true, message: '地区不能为空', trigger: 'blur' }]
});
</script>

<style scoped>
.operation-div {
  width: 100%;
  text-align: left;
  padding-left: 10px;
  padding-top: 10px;
}

.search-div {
  width: 100%;
  text-align: right;
  padding-top: 10px;
}

.dialog-footer {
  text-align: right;
  padding: 10px 0;
}
</style>
